<template>
  <div>
    <el-row>
      <el-col :span="24">
        <div class="addccc">
          <el-button
            type="primary"
            @click="storage(1)"
            icon="el-icon-circle-plus-outline"
            >入库</el-button
          >
        </div>
      </el-col>
      <el-col :span="24">
        <div>
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="date" label="产品名称" width="">
            </el-table-column>
            <el-table-column prop="name" label="产品分类" width="">
            </el-table-column>

            <el-table-column prop="address2" label="库存数量">
            </el-table-column>
            <el-table-column prop="unit" label="产品单位"> </el-table-column>
            <el-table-column prop="total" label="总价"> </el-table-column>
            <el-table-column prop="address3" label="入库员"> </el-table-column>
            <el-table-column prop="address4" label="日期"> </el-table-column>
            <el-table-column prop="address5" label="备注"> </el-table-column>
            <el-table-column label="操作" width="220" align="center">
              <template #default="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)"
                  >出库</el-button
                >
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)"
                  >编辑</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
    <el-dialog
      :title="single"
      v-model="plassets"
      width="70%"
      :close-on-click-modal="false"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="入库日期">
          <el-date-picker
            style="width: 300px"
            v-model="form.dates"
            type="date"
            placeholder="选择日期"
            format="YYYY 年 MM 月 DD 日"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="入库员">
          <el-input v-model="form.personnel" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="责任人">
          <el-select
            v-model="approver"
            clearable
            placeholder="请选择"
            style="width: 300px"
          >
            <el-option
              v-for="item in anyone"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="质检">
          <el-checkbox v-model="form.quality">备选项</el-checkbox>
        </el-form-item>
        <el-form-item label="关联采购订单">
          <el-input v-model="form.reassociated" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="入库明细" style="width: 100%">
          <el-button type="success" plain @click="addLine">新增一条</el-button>
          <el-button @click="save">保存</el-button>
          <el-table :data="filtering" border style="width: 100%">
            <el-table-column label="产品名称" width="250">
              <template #default="scope">
                <el-input
                  v-model="scope.row.getItems"
                  placeholder="名称"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="产品分类" width="200">
              <template #default="scope">
                <el-input
                  v-model="scope.row.classification"
                  placeholder="名称"
                ></el-input>
              </template>
            </el-table-column>

            <el-table-column label="单位">
              <template #default="scope">
                <el-input v-model="scope.row.unit"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="入库数量">
              <template #default="scope">
                <el-input v-model="scope.row.offset"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="入库单价">
              <template #default="scope">
                <el-input v-model="scope.row.price_round"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="金额">
              <template #default="scope">
                <el-input v-model="scope.row.amount"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template #default="scope">
                <el-button
                  type="text"
                  @click="deleteunused(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>

        <el-form-item label="备注">
          <el-input
            style="width: 300px"
            v-model="form.addnote"
            type="textarea"
            :rows="2"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="plassets = false">取 消</el-button>
          <el-button type="primary" v-if="under == 1" @click="determine()"
            >确 定</el-button
          >
          <el-button @click="hardware()" v-else type="primary"
            >编辑 确 定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      plassets: false,
      under: 1,
      single: "",
      approver: "", //责任人
      anyone: [], //人员
      form: {
        // getItems: "",
        // classification: "",
        // offset: "",
        // unit: "",
        personnel: "",
        quality: "", //质检
        dates: "",
        addnote: "",
        reassociated: "",
      },
      filtering: [
        {
          getItems: "", //产品名称
          classification: "", //产品分类
          offset: "", //产品数量
          unit: "",
          price_round: "",
          amount: "", //金额
        },
      ],
      tableData: [
        {
          date: "书籍",
          name: "办公用品",
          date1: "100",
          address: "入库",
          address1: "本",
          address2: "100",
          address3: "张三",
          total: "",
          unit: "本",
          address4: "2021/5/11",
          address5: "xxxxxxx",
        },
      ],
      headerObj: "",
    };
  },
  created() {
    let str = sessionStorage.getItem("token");
    this.headerObj = `Bearer ${str}`;
  },
  beforeMount() {
    this.author();
  },
  methods: {
    storage(index) {
      this.under = index;
      this.single = "新增";
      this.plassets = true;
    },
    author() {
      this.$axios
        .get(`api/serial/other/staff`, {
          headers: {
            Authorization: this.headerObj,
          },
        })
        .then((res) => {
          // console.log(res);
          let initData = res.data.data;
          console.log(initData);
          let trees = [];
          initData.forEach((item, index) => {
            trees[index] = {
              value: item.id,
              label: item.name,
            };
          });
          this.anyone = trees;
        });
    },
    //新增行数
    addLine() {
      var newValue = {
        getItems: "",
        classification: "",
        offset: "",
        unit: "",
        price_round: "",
        amount: "",
      };
      this.filtering.push(newValue);
    },
    save() {
      console.log(JSON.stringify(this.filtering));
    },
    deleteunused(index) {
      //删除行数
      console.log(index);
      this.filtering.splice(index, 1);
    },
  },
};
</script>

<style scoped>
.addccc {
  margin-bottom: 20px;
}
</style>